<template>
<div class="container">
  <div style="margin: 20px 0">
    <a-space>
      <a-input :style="{width:'320px'}" v-model="secret" placeholder="请输入秘钥..." allow-clear/>
      <a-button type="primary" @click="randomSecret">自动获取秘钥</a-button>
    </a-space>
  </div>
  <div style="display: flex; justify-content: space-evenly">
    <a-button @click="jia"> + </a-button>
    <a-button @click="jian" status="warning"> - </a-button>
  </div>
  <br>
  <div v-for="(item, i) in data" style="margin: 5px 0">
    <a-input :style="{width:'320px'}" v-model="data[i]" placeholder="请输入明文.." allow-clear/>
  </div>
  <a-button type="primary" @click="encrypt(secret)">一键编码</a-button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import axios from "axios";
import { Notification } from '@arco-design/web-vue';

const secret = ref('')
const randomSecret = () => {
  axios.get('http://39.103.150.37:2021/jasypt/random-secret').then((response) => {
    secret.value = response.data.data
  })
}
const data = ref([''])

const encrypt = (secret) => {
  if (!secret) {
    Notification.error('请输入秘钥!')
    return
  }
  axios.post(`http://39.103.150.37:2021/jasypt/encrypt/${secret}`, data.value).then(res => {
    data.value = res.data.data
  })
}

const jia = () => {
  data.value.push('')
}

const jian = () => {
  data.value.pop()
}

</script>

<style scoped>
.container {
  display: block;
  width: 300px;
  margin: auto;
}
</style>
